<template>
  <div class="el-full el-box-column">
    <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-warning-outline"></i>
              {{formTitle}}
            </span>
          </div>
      <div class="text item el-over-auto">
          <el-form label-width="150px" ref="addData" :model="addData">
              <el-form-item label="" prop="">
                <el-col :span="4">
                    预定人：<span>{{addData.createdByName}}</span>
                </el-col>
                <el-col :span="6">
                    会议室：<span>{{addData.roomName}}</span>
                </el-col>
                <el-col :span="4">
                    位置：<span>{{addData.positionName}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="会议主题：" prop="meetingSubject" :rules="{ required: true, message: '请填写会议主题'}">
                <el-col :span="14">
                  <el-input v-model="addData.meetingSubject" placeholder="请填写会议主题" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="会议日期：" prop="meetingDate">
                <el-col :span="6">
                  <el-date-picker
                    v-model="addData.meetingDate"
                    type="date"
                    placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-col>
                <el-col :span="12">
                    <el-time-select
                        placeholder="起始时间"
                        v-model="addData.startTime"
                        style="width:100px"
                        :picker-options="{
                        start: '08:30',
                        step: '00:30',
                        end: '22:00',
                        maxTime: addData.endTime
                        }"
                        @change="startChange"
                    >
                    </el-time-select>
                    <el-time-select
                        placeholder="结束时间"
                        v-model="addData.endTime"
                        style="width:100px"
                        :picker-options="{
                        start: '08:30',
                        step: '00:30',
                        end: '22:00',
                        minTime: addData.startTime
                    }"
                    @change="endChange">
                    </el-time-select>
                </el-col>
              </el-form-item>
              <el-form-item label="参会人员：" prop="roomAttendees">
                <el-col :span="12">
                  <el-input 
                    v-model="addData.roomAttendees" 
                    placeholder="请选择参会人员" 
                    readonly
                  >
                    <i v-show="addData.roomAttendees" slot="suffix" class="el-input__icon el-icon-circle-close" @click="clearParentName" style="cursor: pointer;"></i>
                    <el-button slot="append" icon="el-icon-search" @click="principalPeople"></el-button>
                  </el-input>
                  
                </el-col>
              </el-form-item>
              <el-form-item label="参会人数：" prop="members">
                <el-col :span="12">
                    <el-input-number v-model="addData.members" :min="0" :max="999" maxlength="3" label="请填写人数"></el-input-number>人
                </el-col>
              </el-form-item>
              <el-form-item label="提醒：" prop="notifyIntervalTime">
                <el-col :span="24">
                  <el-radio-group v-model="addData.notifyIntervalTime">
                    <el-radio v-for="(item,k) in notifyIntervalArr" :key="k" :label="item.dictId">{{item.dictName}}</el-radio>
                    <!-- <el-radio label="1" border>不提醒</el-radio>
                    <el-radio label="2" border>5分钟</el-radio>
                    <el-radio label="3" border>15分钟</el-radio>
                    <el-radio label="4" border>20分钟</el-radio>
                    <el-radio label="5" border>30分钟</el-radio>
                    <el-radio label="6" border>1小时</el-radio> -->
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item label="提醒方式：" prop="notifyMode">
                <el-col :span="24">
                  <el-radio-group v-model="addData.notifyMode">
                    <el-radio v-for="(item,k) in notifyModeArr" :key="k" :label="item.dictId">{{item.dictName}}</el-radio>
                    <!-- <el-radio label="1" border>不提醒</el-radio>
                    <el-radio label="2" border>5分钟</el-radio>
                    <el-radio label="3" border>15分钟</el-radio>
                    <el-radio label="4" border>20分钟</el-radio>
                    <el-radio label="5" border>30分钟</el-radio>
                    <el-radio label="6" border>1小时</el-radio> -->
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item label="内容：" prop="meetingContent">
                <el-col :span="14">
                  <el-input type="textarea" :rows="2" v-model="addData.meetingContent" placeholder="请填写内容"></el-input>
                  <el-upload 
                    style="margin-top:4px;"
                    class="upload-demo" 
                    action="/api/aggregation/attachManage/uploadByBusiness" 
                    :on-preview="handlePreview"
                    :before-remove="beforeRemove" 
                    multiple 
                    :limit="10" 
                    :data="fileData" 
                    :on-exceed="handleExceed"
                    :file-list="fileList" 
                    v-model="addData.files" 
                    ref="upload" 
                    :on-change="onChangeFile"
                    :on-success="onSuccess" 
                    :on-error="onError"
                    :auto-upload="false" 
                    :before-upload="beforeAvatarUpload">
                    <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
                </el-col>
              </el-form-item>
              <el-form-item label="" prop="" v-if="addData.price">
                <el-col :span="14">
                  <span style="color:#666">会议室费用使用标准</span>
                  <span style="float:right;color:#666">{{addData.price}}元/小时</span>
                </el-col>
              </el-form-item>
              
              <el-form-item label="" prop="" v-if="addData.price">
                <el-col :span="14">
                  <span style="color:#666">会议时长</span>
                  <span style="float:right;color:#666">{{duration}}小时</span>
                </el-col>
              </el-form-item>
              <el-form-item label="" prop="" v-if="addData.price">
                <el-col :span="14">
                  <span>预计会议费用</span>
                  <span style="float:right;color:red">{{cost}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="" prop="" v-if="addData.auditStatusDesc">
                <el-col :span="14">
                  <el-input type="textarea" :rows="2" v-model="addData.content" placeholder="请填写内容"></el-input>
                  <el-button type="danger" style="display:block;float:right;margin-top:4px" @click="handleCheckContent('addData')">回 复 <i class="el-icon-document-checked"></i></el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="" prop="" v-if="addData.auditStatusDesc">
                <el-col :span="14">
                  <div class="text item el-over-auto">
                    <ul class="text mid-panels">
                    <li class="el-box panel" v-for="(val, index) in addData.roomCommentList" :key="index">
                        <div class="user-avatar">{{val.attendee}}</div>
                        <div class="listRightPart">
                        <span class="name">{{val.attendee}}</span>
                        <span class="dept">{{val.content}}</span>
                        <!-- <span class="dept" v-for="(v, i) in val.positions" :key="i">{{v.posiName}}</span> -->
                        <span style="float:right" @click="handDelete(val)">删除</span>
                        </div>
                    </li>
                    </ul>
                </div>
                </el-col>
              </el-form-item>
            </el-form>
      </div>
      <div style="text-align: right;margin-bottom: 8px;margin-right: 8px;">
          <el-button type="" @click="handleCheckAdd('addData')">保 存 <i class="el-icon-document-checked"></i></el-button>
          <el-button type="primary" @click="handleCheckput('addData')">提 交 <i class="el-icon-document-checked"></i></el-button>
          <el-button type="danger" @click="cancelEvt()">关 闭 <i class="el-icon-close"></i></el-button>
      </div>
    </el-card>
    <selectPersonnelDalog
    :schedulePersonList="addData.roomAttendeesList"
    :dialogPersonnelVisible="dialogprincipalVisible"
    :multiple="true"
    @dialogEmployeesData="dialogprincipalCheckSure"/>
    <selectOrg
    :dialogPersonnelVisible="dialogOrgVisible"
    :multiple="true"
    @dialogEmployeesData="dialogOrgCheckSure"></selectOrg>
    <!-- leixing -->
    <!-- <dialogConferenceType
    :dialogGroupVisible="dialogGroupVisible"
    @dialogEmployeesData="dialogTypeCheckSure"
    ></dialogConferenceType>
    
    <dialogConferenceAddr
    :dialogGroupVisible="dialogAddrVisible"
    @dialogEmployeesData="dialogAddrCheckSure"
    ></dialogConferenceAddr> -->
  </div>
</template>
<script>
  import {
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer,
    Tabs,
    TabPane,
    Upload
  } from 'element-ui'
  import {
      uploadByBusiness, //上传图片
  } from '@/api/contentManage/contentManage/columnManage.js'
  
  import {
      findAttchList, //获取文件列表
      preview, //预览图片
  } from '@/api/contentManage/contentManage/contentManage.js'
  import {
      addReservation, //保存会议室预定
      upReservation, //修改会议室预定
      putReservation, //提交会议室预定
      getReservation,//获取会议室详情
      childrenDict, //会议提醒间隔
  } from '@/api/conference/reservation.js'
  import {
      delComment, //删除会议评论
      addComment,//新增会议评论
      
      commentList,//查询会议评论
  } from '@/api/conference/conferenceEmploy.js'
  
  import selectPersonnelDalog from "@/components/selectPersonnel"
  import selectOrg from '../selectOrg'
//   import dialogConferenceType from './dialogConferenceType'
//   import dialogConferenceAddr from './dialogConferenceAddr'
//   import drawerTree from '../contentManage/drawerTree.vue';
  export default {
    name: "creatColumn",
    components: {
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      'el-drawer': Drawer, // 抽屉
      'el-tabs': Tabs, // 标签页
      'el-tab-pane': TabPane, // 标签页列
      "el-upload": Upload, //上传
      selectPersonnelDalog,
      selectOrg,
    //   dialogConferenceType,
    //   dialogConferenceAddr
    //   drawerTree
    },
    data() {
      return {
        elDialogTreeKey: 3,
        imageUrl: '',
        getFile:{},
        headingId: '',
        fileData: {
          bigCatName: '',
          smallCatName: '',
          businessId: ''
        },
        addData: {
            reservationId:'',
            createdByName:'',
            roomName:'',
            name3:'',
            meetingSubject:'',
            meetingDate:new Date,
            startTime:'',
            endTime:'',
            members:'',
            notifyMode:'',
            notifyIntervalTime:'',
            meetingContent:'',
            roomCommentList:[],
            content:'',
            roomAttendeesList:[],
            roomAttendees:"",
            duration:'',
            cost:''
          
        },
        duration:'',
        cost:'',
        articleTemplateList: [], //栏目内容下拉
        addStatus: [], //栏目模板
        isShow: false,
        fileList: [],
        formTitle: '预定会议室',
        imgAttid: '',
        dialogImageUrl: '',
        dialogVisible: false,
        dialogprincipalVisible:false, //选择人员
        dialogOrgVisible: false, //选择组织
        dialogGroupVisible: false, //选择会议类型
        dialogAddrVisible: false,//选择位置
        notifyIntervalArr:[], //提醒时间
        notifyModeArr:[], //提醒方式
        // employeesPeople:[
        //     {
        //         attendee: '张一',
        //         content: '你说什么'
        //     }
        // ]
        
      }
    },
    created() {
      this.formTitle= '预定会议室'
      childrenDict('cbc72d21118b4051aebd664dd42e9e80').then((res)=>{
        if(res.data.code == 10000){
          this.notifyIntervalArr = res.data.data
        }
      })
      childrenDict('db1989306b964c5c9444381b32db8cb9').then((res)=>{
        if(res.data.code == 10000){
          this.notifyModeArr = res.data.data
        }
      })
      if(this.$route.params.row.auditStatusDesc){
        this.authorizationTabel(this.$route.params.row.reservationId)
        
      }else{
        this.addData = this.$route.params.row
        let hour1= this.addData.startTime.split(':')[0]
        let min1 = this.addData.startTime.split(':')[1]
        
        let e = +hour1+1
        if(!this.addData.endTime){
          this.addData.endTime = e+':'+min1
        }
        this.addData.notifyIntervalTime = '85ae0f27647d4ad182e88b4d8c547998'
        this.addData.notifyMode = 'ec8304ebc583447ebdb816e17b3c0c4b'
        let hour2 = this.addData.endTime.split(':')[0]
        let min2 = this.addData.endTime.split(':')[1]
       
        var hours = hour2 - hour1;
        var minutes =  min2 - min1;
       
        // if(minutes == 0){
        //   this.duration = hours
        // }else{
        //   this.duration = hours+'.'+minutes
        // }
        if((minutes == 30 || minutes == -30) && hours < 0){
          minutes = '0.5'
        }else if(minutes == 0){
          minutes = ''
        }else{
          minutes = '.5'
        }
        if(hours < 0){
          hours = ''
        }
        let c = hours+minutes
        this.duration = c
        this.addData.duration = c
        this.cost = this.addData.price*this.duration
       
      }
    
    },
    methods: {
      //关闭
      cancelEvt() {
        this.$router.go(-1)
      },
      // 编辑授权表格获取单条数据事件
      authorizationTabel (id) {
        getReservation(id).then(res => {
          if(res.data.code == 10000){
            this.addData = res.data.data
            let hour1= this.addData.startTime.split(':')[0]
            let min1 = this.addData.startTime.split(':')[1]
            let hour2 = this.addData.endTime.split(':')[0]
            let min2 = this.addData.endTime.split(':')[1]
          
            var hours = hour2 - hour1;
            var minutes =  min2 - min1;
           
            // if(minutes == 0){
            //   this.duration = hours
            // }else{
            //   this.duration = hours+'.'+minutes
            // }
            if((minutes == 30 || minutes == -30) && hours < 0){
              minutes = '0.5'
            }else if(minutes == 0){
              minutes = ''
            }else{
              minutes = '.5'
            }
            if(hours < 0){
              hours = ''
            }
            let c = hours+minutes
            this.duration = c
            this.addData.duration = c
            this.cost = this.addData.price*this.duration
            let name = []
            this.addData.roomAttendeesList.forEach((v)=>{
              name.push(v.attendee)
            })
            this.addData.roomAttendees = name.join(',')
            // this.content = this.addData.
            // findAttchList({
            //   businessId: id,
            //   smallCatName:'图片'
            // }).then((res)=>{
            //   if(res.data.code == 10000){
                
            //     if(res.data.data.records !== []){
            //       this.imgAttid = res.data.data.records[0].attId
            //       preview(this.imgAttid).then((res)=>{
            //         if(res.data.code == 10000){
            //           this.imageUrl = res.data.data;
            //         }
            //       })
            //     }
                
            //   }
            // })
          }
        })
      },
      //开始时间发生改变
      startChange(v){
        let hour1= this.addData.startTime.split(':')[0]
        let min1 = this.addData.startTime.split(':')[1]
        let hour2 = this.addData.endTime.split(':')[0]
        let min2 = this.addData.endTime.split(':')[1]
        var hours = hour2 - hour1;
        var minutes =  min2 - min1;
        if((minutes == 30 || minutes == -30) && hours < 0){
          minutes = '0.5'
        }else if(minutes == 0){
          minutes = ''
        }else{
          minutes = '.5'
        }
       
        if(hours < 0){
          hours = ''
        }
        let c = hours+minutes
        this.duration = c
        this.addData.duration = c
        this.cost = (this.addData.price*1)*(this.duration*1)
        this.addData.cost = (this.addData.price*1)*(this.addData.duration*1)
      },
      //结束时间发生改变
      endChange(v){
        let hour1= this.addData.startTime.split(':')[0]
        let min1 = this.addData.startTime.split(':')[1]
        let hour2 = this.addData.endTime.split(':')[0]
        let min2 = this.addData.endTime.split(':')[1]
        var hours = hour2 - hour1;
        var minutes =  min2 - min1;
        if((minutes == 30 || minutes == -30) && hours < 0){
          minutes = '0.5'
        }else if(minutes == 0){
          minutes = ''
        }else{
          minutes = '.5'
        }
       
        if(hours < 0){
          hours = ''
        }
        let c = hours+minutes
        this.duration = c
        this.addData.duration = c
        this.cost = (this.addData.price*1)*(this.duration*1)
        this.addData.cost = (this.addData.price*1)*(this.addData.duration*1)
      },
      handleCheckAdd(formName) { //保存
      
      if(this.addData.roomAttendeesList){
        this.addData.roomAttendeesList.forEach((v)=>{
          v.attendee = v.empName
          v.attendeeUserId = v.userId
        })
      }
      return false;
      this.$refs[formName].validate((valid) => {
          if (valid) { //校验
              if(!this.addData.reservationId){
            //     meetingSubject:'',
            // meetingDate:new Date,
            // startTime:'',
            // endTime:'',
            // members:'',
            // notifyMode:'4',
            // meetingContent:''
              addReservation({
                  "meetingSubject": this.addData.meetingSubject,
                  // "reservationId": this.addData.reservationId,
                  "meetingDate": this.addData.meetingDate,
                  "startTime": this.addData.startTime,
                  "endTime": this.addData.endTime,
                  "members": this.addData.members,
                  "notifyMode": this.addData.notifyMode,
                  "notifyIntervalTime":this.addData.notifyIntervalTime,
                  "meetingContent": this.addData.meetingContent,
                  "roomId":this.addData.roomId,
                  "roomAttendeesList":this.addData.roomAttendeesList
              }).then((res)=>{
                  if (res.data.code == 10000) {
                    // this.headingId = res.data.data.headingId
                    // if(this.imageUrl !== ''){
                    //   this.fileData.bigCatName = this.addData.upHeadingName
                    //   this.fileData.smallCatName = '图片'
                    //   this.fileData.businessId = res.data.data.headingId
                    //   this.$refs.upload.submit() // 手动触发上传
                    
                    // }else{
                      Message({
                          type: 'success',
                          message: "保存成功"
                      })
                      this.$router.go(-1)
                    // }
                    
                  
                  }
              })
              
              }else{
                // 
                upReservation({
                  "meetingSubject": this.addData.meetingSubject,
                  "reservationId": this.addData.reservationId,
                  "meetingDate": this.addData.meetingDate,
                  "startTime": this.addData.startTime,
                  "endTime": this.addData.endTime,
                  "members": this.addData.members,
                  "notifyMode": this.addData.notifyMode,
                  "notifyIntervalTime":this.addData.notifyIntervalTime,
                  "meetingContent": this.addData.meetingContent,
                  "roomId":this.addData.roomId,
                  "roomAttendeesList":this.addData.roomAttendeesList
                }).then((res)=>{
                  if (res.data.code == 10000) {
                    // this.headingId = res.data.data.headingId
                    // if(this.imageUrl !== ''){
                    //   this.fileData.bigCatName = this.addData.upHeadingName
                    //   this.fileData.smallCatName = '图片'
                    //   this.fileData.businessId = res.data.data.headingId
                    //   this.$refs.upload.submit() // 手动触发上传
                    
                    // }else{
                      Message({
                          type: 'success',
                          message: "修改成功"
                      })
                      this.$router.go(-1)
                    // }
                    
                  
                  }
                })
              }
                  
            }
          });

      },
      //提交
     handleCheckput(formName){
         if(this.addData.roomAttendeesList){
        this.addData.roomAttendeesList.forEach((v)=>{
          v.attendee = v.empName
          v.attendeeUserId = v.userId
        })
      }
         this.$refs[formName].validate((valid)=>{
           if(valid){
             putReservation({
                "meetingSubject": this.addData.meetingSubject,
                // "reservationId": this.addData.reservationId,
                "meetingDate": this.addData.meetingDate,
                "startTime": this.addData.startTime,
                "endTime": this.addData.endTime,
                "members": this.addData.members,
                "notifyMode": this.addData.notifyMode,
                "notifyIntervalTime":this.addData.notifyIntervalTime,
                "meetingContent": this.addData.meetingContent,
                "roomId":this.addData.roomId,
                "roomAttendeesList":this.addData.roomAttendeesList
             }).then((res)=>{
              if(res.data.code == 10000){
                Message({
                  type: 'success',
                  message: "提交成功"
                })
                this.$router.go(-1)
              }
            })
           }
         })
         
     },
      //获取会议评论
      getComment(){
        commentList(this.addData.reservationId).then((res)=>{
          if(res.data.code == 10000){
            this.addData.roomCommentList = res.data.data.records
          }
        })
      },
      //新增评论
      handleCheckContent(){
        addComment({
          content:this.addData.content,
          reservationId:this.addData.reservationId
        }).then((res)=>{
          if(res.data.code == 10000){
            Message.success('新增成功')
              this.getComment()
          }
        })
      },
     //删除会议评论
     handDelete(v){
      // 
      MessageBox.confirm("是否确定删除评论?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          delComment(v.commentId).then(res => {
            if (res.data.code === 10000) {
              Message.success('删除成功')
              this.getComment()
              // this.myDelegateTable()
            }
          })
        })
        .catch(() => {})
     },
      //人员弹框
      principalPeople(){
          this.dialogprincipalVisible = true;
      },
      dialogprincipalCheckSure(data){
          this.dialogprincipalVisible = false
          if (!data) {
          return
          }
          let name = []
          this.addData.roomAttendeesList = data
          this.addData.roomAttendeesList.forEach((v)=>{
            name.push(v.empName)
          })
          this.addData.roomAttendees = name.join(',')
          // this.formData.waiterList = data[0].empName
          // this.formData.waiter = data[0].userId
      },
      clearParentName(){
        // this.addData.positionId = ''
        // this.addData.positionName = ''
        this.formData.waiterList = []
        this.formData.waiter = ''
      },
      //组织弹框
      principalOrg(){
          this.dialogOrgVisible = true
      },
      dialogOrgCheckSure(data){
          this.dialogOrgVisible = false
          if (!data) {
              return
          }
      },
      clearOrgName(){
        this.formData.orgRangeList = []
        this.formData.orgRange = ''
        // this.addData.positionId = ''
        // this.addData.positionName = ''
      },
      //会议类型
      dialogClick () {
          this.dialogGroupVisible = true
      },
      dialogTypeCheckSure(data){
        this.dialogGroupVisible = false;
        if (!data) {
              return
          }
      },
      clearTypeName(){
        this.formData.roomCatId = ''
        this.formData.roomCatName = ''
        // this.addData.positionId = ''
        // this.addData.positionName = ''
      },
      //位置
      dialogClickAddr(){
        this.dialogAddrVisible = true
      },
      dialogAddrCheckSure(data){
        this.dialogAddrVisible = false
        this.dialogGroupVisible = false;
        if (!data) {
          return
        }
        this.addData.positionId = data.positionId
        this.addData.positionName = data.position
      },
      clearAddrName(){
        this.addData.positionId = ''
        this.addData.positionName = ''
      },
      //删除确认
      beforeRemove(file, fileList) {
        return MessageBox.confirm(`确定移除 ${ file.name }？`)
      },
      //点击文件获取文件信息
      handlePreview(file) {
      },
      //控制文件个数
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeAvatarUpload(file) {
        if (!file) {
          Message.warning("请选择需要导入的模板！")
          return
        }
      },
      // 上传的文件的列表发生变化
      onChangeFile(file, fileList) {
        this.fileList = fileList
      },
      onSuccess(res) {
        if (res.code === 10000) {
          Message.success('操作成功')
          this.$router.go(-1)
        }else{
          Message.success(res.msg)
        }
      },
      // 文件上传(提交)接口失败
      onError(err) {
        Message.error('上传失败')
        console.log('失败', err)
      },
    }
  }
</script>
<style lang="scss">
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.mid-panels {
  li {
    padding: 15px 10px 7px;
    font-size: 12px;
    color: #333333;
    // overflow: hidden;
    .user-avatar {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      color: #ffffff;
      background-color: #81C684;
    }
    .listRightPart {
        width: 100%;
      display: inline-block;
      padding-left: 10px;
      vertical-align: middle;
      .name{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #333333;
      }
      .dept{
        font-size: 12px;
        color: #9e9e9e;
      }
    }
    &:hover{
      cursor: pointer;
      background-color: #f7f7f7;
    }
  }
  .activePsn {
    background-color: #f7f7f7;
  }
  .loading {
    height: 20px;
    line-height: 20px;
    padding: 0 0 15px 100px;
  }
}
</style>
